<template>
  <div class="content2">
    <div v-show="errorArr.length == 0" class="empty">
      <el-empty :image-size="200" description="暂无错题"></el-empty>
    </div>
    <div v-show="errorArr.length > 0">
      <div class="left">
        <div v-for="(item, index) in errorArr" :key="index + 'e'"
          v-show="currentPage == index">
          <h4>{{ index + 1 }}.{{ item.exerciseId.topics }}</h4>
          <ul class="main2">
            <li v-for="(option, i) in item.exerciseId.options"
              :key="i + 'option'">
              <button class="btn btn-light">{{ selectArr[i] }}</button>
              <span>{{ option }}</span>
            </li>
          </ul>
          <div class="button-box">
            <button class="btn btn-success"
              @click="collectError(item.exerciseId._id)">
              收藏
            </button>
            <button class="btn btn-warning" style="color: white"
              @click="deleteError(item._id)">
              标记为已学会
            </button>
            <div>
              <button class="btn btn-primary" style="margin-right: 5px"
                @click="preExe()" v-show="currentPage != 0">
                上一题
              </button>
              <button class="btn btn-primary" @click="nextExe()"
                v-show="currentPage != errorArr.length - 1">
                下一题
              </button>
            </div>
          </div>
          <div class="footer1" v-show="isShowHide">
            <h6 class="aaa" style="color: red">
              考生答案 {{ selectArr[item.errorAnswer] || "未选" }}
              <button type="button" class="btn btn-danger">错误</button>
            </h6>
            <h6>正确答案 {{ selectArr[item.exerciseId.answer] }}</h6>
            <p>解析：{{ item.exerciseId.analysis }}</p>
          </div>
        </div>
      </div>
      <div class="right">
        <p>
          <span>题卡</span>
          <span>共{{ errorArr.length }}题</span>
        </p>
        <div class="button-box">
          <button v-for="(item, index) in errorArr.length"
            :key="item + 'homebtn'" type="button" class="btn btn-light"
            @click="targetTest(index)"
            :class="{ active: index == currentPage }">
            {{ item }}
          </button>
        </div>
        <div class="check">
          默认显示注释
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input"
              id="customSwitch1" @click="checkShowHide" checked />
            <label class="custom-control-label" for="customSwitch1"></label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      errorArr: [],
      selectArr: ["A", "B", "C", "D"],
      currentPage: 0,
      isShowHide: true
    };
  },
  methods: {
    checkShowHide() {
      this.isShowHide = !this.isShowHide;
    },

    //按钮切换
    targetTest(i) {
      this.currentPage = i;
    },
    preExe() {
      this.currentPage--;
    },
    nextExe() {
      this.currentPage++;
    },
    // 删除错题
    deleteError(_id) {
      this.$http
        .post("/errors/deleteErrors", {
          _id
        })
        .then(({ data }) => {
          if (data.code == 200) return this.$message.success(data.message);
          this.$message.error(data.message);
        });
      if (this.currentPage != 0) this.currentPage = 0;
      this.getAllError();
    },
    // 添加收藏
    collectError(exerciseId) {
      this.$http
        .post("/collections/createCollections", {
          studentId: sessionStorage.getItem("userId"),
          exerciseId
        })
        .then(({ data }) => {
          if (data.code == 200) return this.$message.success("添加收藏成功");
          this.$message.error("收藏题目已存在");
        });
      if (this.currentPage != 0) this.currentPage = 0;
      this.getAllError();
    },

    // 获取所有错题数据
    getAllError() {
      //解决刷新数据消失问题
      sessionStorage.userId =
        this.$store.state.userInfo._id || sessionStorage.getItem("userId");
      this.$http
        .post("/errors/getErrors", {
          studentId: sessionStorage.getItem("userId")
        })
        .then(({ data }) => {
          this.errorArr = data.result || [];
          //组件传参
          this.$emit("getErrorNum", this.errorArr.length);
        });
    }
  },
  mounted() { },
  beforeMount() {
    this.getAllError();
  }
};
</script>

<style lang="scss" scoped>
.content2 {
  .empty {
    display: flex;
    justify-content: center;
  }
  > div {
    display: flex;
    margin-bottom: 50px;
    justify-content: space-between;
    .left {
      width: 650px;
      .main2 {
        padding-left: 20px;
        margin-top: 35px;
        list-style: none;
        li {
          margin-bottom: 30px;
        }
        button {
          margin-right: 20px;
          width: 34px;
          height: 34px;
          border-radius: 17px;
          line-height: 12px;
        }
      }
      .button-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
      }
      .footer {
        height: 170px;
        border: 1px solid rgb(219, 219, 219);
        padding: 30px;
        p {
          margin-top: 20px;
        }
      }
      .footer1 {
        border: 1px solid rgb(219, 219, 219);
        padding: 30px;
        .aaa {
          display: flex;
          justify-content: space-between;
          button {
            margin-top: -15px;
          }
        }
        p {
          margin-top: 20px;
        }
      }
    }
    .right {
      width: 280px;
      height: 480px;
      border: 1px solid rgb(219, 219, 219);
      margin-left: 10px;
      position: relative;
      p {
        padding: 0 20px;
        line-height: 50px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgb(219, 219, 219);
      }
      .button-box {
        padding: 0 4px;

        button {
          width: 50px;
          height: 50px;
          margin-bottom: 5px;
          margin-right: 3px;
        }
        button.active {
          background-color: #007bff;
          color: white;
        }
      }
      .check {
        width: 240px;
        padding: 0 20px;
        position: absolute;
        bottom: 0;
        line-height: 50px;
        display: flex;
        justify-content: space-between;
        > div {
          height: 30px;

          display: flex;
          align-items: center;
          .custom-control-input {
            width: 100px;
          }
        }
      }
    }
  }
}
</style>
